<template>
	<view class="Stored-valueCard public">
		<view class="main">
			<view class="header">
				<view class="header-title">
					<view class="header-title-block">
						储值卡
					</view>
					<view class="header-title-balance">
						<view class="header-title-balance-main">
							余额
							<text class="amountOfMoney">{{ face_value }}</text>
							<text>元</text>
						</view>
					</view>
				</view>
				<view class="header-footer">
					<view class="header-footer-item" @click="JumpToIncomeAndExpenditureDetails">
						<image src="../../../static/my/Stored-valueCard/bull.png" mode=""></image>
						<text>收支明细</text>
					</view>
					<view class="header-footer-item" @click="JumpPaymentManagement">
						<image src="../../../static/my/Stored-valueCard/lock.png" mode=""></image>
						<text>支付管理</text>
					</view>
					<view class="gang">
						|
					</view>
				</view>
			</view>
			<!-- 常规活动 -->
			<view class="RegularActivities">
				<view class="title">
					常规活动
				</view>
				<view class="SelectAmount">
					<view class="SelectAmount-item"
						:class="SelectAmountItemNum == item.recharge_id ? 'SelectAmountItemSelected' : ''"
						v-for="item in RegularActivitiesArr.list" :key="item.recharge_id" @click="tabPrice(item.recharge_id)">
						<view class="">
							充{{ item.buy_price | priceXiao }}元
							<view class="preferential">
								送{{ item.face_value - item.buy_price | priceXiao }}元
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 自定义金额 -->
			<view class="CustomAmount">
				<view class="title">
					自定义金额
				</view>
				<view class="inputView">
					<text>￥</text>
					<input type="number" placeholder="请输入金额" v-model="customAmount" @focus="focusCustomAmount">
				</view>
			</view>
			<view class="buttonView">
				<button @click="rechargeSubmission">充值</button>
			</view>
		</view>
	</view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
	data() {
		return {
			face_value: 0,
			SelectAmountItemNum: 0,
			customAmount: '',
			RegularActivitiesArr: []
		}
	},
	onLoad() {
		this.rechargePackage()
	},
	onShow() {
		this.getBalance()
	},
	methods: {
		// 充值
		rechargeSubmission() {
			$api.postRechargeSubmission({
				recharge_id: this.SelectAmountItemNum || 0,
				face_value: this.customAmount,
			}).then(res => {
				$api.postPayment({
					out_trade_no: res.data.data,
					pay_type: 'wechatpay',
				}).then(paymentRes => {
					let obj = paymentRes.data.data.data
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: obj.timeStamp,
						nonceStr: obj.nonceStr,
						package: obj.package,
						signType: obj.signType,
						paySign: obj.paySign,
						success: function (res) {
							uni.navigateTo({
								url: '../../../pages/Paymentcompletion/Paymentcompletion?source=' + 1
							})
						},
						fail: function (err) {
							uni.navigateTo({
								url: '../../../pages/Paymentcompletion/Paymentcompletion?source=' + 2
							})
						}
					});
				})
			})
		},
		// 获取常规活动列表
		rechargePackage() {
			$api.postRechargePackage({}).then(res => {
				this.RegularActivitiesArr = res.data.data
			})
		},
		// 获取余额
		getBalance() {
			$api.postUserInformation({}).then(res => {
				if (res.data.code == 0) {
					this.face_value = res.data.data.balance
				}
			})

		},
		// 切换价格
		tabPrice(id) {
			this.SelectAmountItemNum = id
		},
		focusCustomAmount() {
			this.SelectAmountItemNum = 0
		},
		// 调转收支明细页面
		JumpToIncomeAndExpenditureDetails() {
			uni.navigateTo({
				url: '../Stored-valueCard/IncomeAndExpenditureDetails'
			})
		},
		// 调转到支付管理页面
		JumpPaymentManagement() {
			uni.navigateTo({
				url: '../Stored-valueCard/PaymentManagement'
			})
		}
	},
	filters: {
		priceXiao(e) {
			return Number(e).toFixed(2)
		}
	}
}
</script>

<style lang="less" scoped>
.Stored-valueCard {
	background: #fafafa;

	.main {
		width: 690rpx;
		margin: auto;

		.header {
			.header-title {
				color: white;
				border-radius: 10rpx;
				background: url('../../../static/my/Stored-valueCard/background.png') no-repeat;
				background-size: 100% 100%;

				.header-title-block {
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					padding: 58rpx 0 54rpx 37rpx;
				}
			}

			.header-title-balance {
				// width: 48rpx;
				// height: 23rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;

				.header-title-balance-main {
					display: flex;
					align-items: baseline;
					padding: 0 0 51rpx 37rpx;

					text {
						// width: 212rpx;
						// height: 53rpx;
						font-size: 60rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					.amountOfMoney {
						padding-left: 30rpx;
					}
				}
			}

			.header-footer {
				position: relative;
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 100rpx;
				background: white;

				.header-footer-item {
					display: flex;
					align-items: center;

					image {
						width: 31rpx;
						height: 31rpx;
						padding-right: 15rpx;
					}
				}

				.gang {
					position: absolute;
					color: #EBEBEB;
				}
			}
		}

		.RegularActivities {
			font-size: 28rpx;
			margin-top: 20rpx;
			padding: 30rpx 20rpx 10rpx 20rpx;
			background: white;

			.SelectAmount {
				display: flex;
				justify-content: space-between;
				margin: 30rpx 0;

				.SelectAmount-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 200rpx;
					height: 140rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1px solid #EEEEEE;
					border-radius: 8rpx;

					.preferential {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #EB4D5E;
						line-height: 40rpx;
					}
				}

				.SelectAmountItemSelected {
					border: 1px solid #E4B569;
				}

				// .SelectAmount-item:first-child {
				// 	border: 1px solid #E4B569;
				// }
			}
		}

		.title {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.CustomAmount {
			background: white;
			margin-top: 20rpx;
			padding: 30rpx 20rpx 10rpx 20rpx;

			.inputView {
				display: flex;
				align-items: center;
				padding-top: 10rpx;
				margin-bottom: 20rpx;

				text {
					padding-right: 10rpx;
				}

				input {
					height: 21rpx;
					font-size: 22rpx;
					font-family: PingFang SC;
					font-weight: 400;
					// color: #999999;
				}
			}
		}

		.buttonView {
			margin-top: 100rpx;

			button {
				width: 690rpx;
				height: 90rpx;
				color: white;
				background: linear-gradient(-28deg, #E4B569, #F0D29D);
				border-radius: 45rpx;
			}
		}
	}
}
</style>